<template>
  <div class="query-container">
    <div class="tabsBox">
      <div
        class="tabIndex"
        :class="{ tabCur: activeTab === 1 }"
        @click="activeTab1"
      >
        基础数据
      </div>
      <div
        class="tabIndex"
        :class="{ tabCur: activeTab === 2 }"
        @click="activeTab2"
      >
        详细数据
      </div>
    </div>
    <div class="shawBox" v-if="activeTab === 1">
      <el-form :inline="true" :model="queryForm1" class="query-form">
        <el-form-item label="航路代码:">
          <el-input v-model="queryForm1.code" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="航路名称:">
          <el-input v-model="queryForm1.name" placeholder="请输入"></el-input>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" @click="getBaseRoutes">查询</el-button>
          <el-button @click="handleReset1">重置</el-button>
          <el-button @click="handleFileBaseSelect" type="primary"
            >导入基础数据</el-button
          >
          <input
            ref="fileBaseInput"
            type="file"
            style="display: none"
            @change="handleFileBaseChange"
          />
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="tableData1"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 290px)"
      >
        <el-table-column label="序号" align="center">
          <template #default="scope">
            {{ (currentPage1 - 1) * pageSize1 + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="航路代码"></el-table-column>
        <el-table-column prop="name" label="航路名称"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total1"
        style="margin-top: 15px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
    <div class="shawBox" v-if="activeTab === 2">
      <el-form :inline="true" :model="queryForm2" class="query-form">
        <el-form-item label="航路代码:">
          <el-input v-model="queryForm2.code" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="航路点名称:">
          <el-input v-model="queryForm2.name" placeholder="请输入"></el-input>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" @click="getDetailRoutes">查询</el-button>
          <el-button @click="handleReset2">重置</el-button>
          <el-button @click="handleFileDetailSelect" type="primary"
            >导入详细数据</el-button
          >
          <input
            ref="fileDetailInput"
            type="file"
            style="display: none"
            @change="handleFileDetailChange"
          />
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="tableData2"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 290px)"
      >
        <el-table-column label="序号" align="center">
          <template #default="scope">
            {{ (currentPage2 - 1) * pageSize2 + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="routeCode" label="航路代码"></el-table-column>
        <el-table-column prop="wpName" label="航路点名称"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="currentPage2"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2"
        style="margin-top: 15px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
    <div style="height: 10px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  baseRoutesApi,
  detailRoutesApi,
  baseRoutesImportApi,
  detailRoutesImportApi,
} from "@/api/other";

const activeTab = ref(1);

const queryForm1 = ref({
  code: "",
  name: "",
});
const queryForm2 = ref({
  code: "",
  name: "",
});

const tableData1 = ref([]);
const fileBaseInput = ref(null);
const tableData2 = ref([]);
const fileDetailInput = ref(null);

let currentPage1 = ref(1);
let pageSize1 = ref(10);
let total1 = ref(0);
let currentPage2 = ref(1);
let pageSize2 = ref(10);
let total2 = ref(0);

const activeTab1 = () => {
  activeTab.value = 1;
  getBaseRoutes();
};
const activeTab2 = () => {
  activeTab.value = 2;
  getDetailRoutes();
};

const getDetailRoutes = async () => {
  const paramsObj = {
    routeCode: queryForm2.value.code,
    name: queryForm2.value.name,
    pageNum: currentPage2.value,
    pageSize: pageSize2.value,
  };
  const { code, data } = await detailRoutesApi(paramsObj);
  if (code === 200) {
    tableData2.value = data.list;
    total2.value = data.total;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const getBaseRoutes = async () => {
  const paramsObj = {
    code: queryForm1.value.code,
    name: queryForm1.value.name,
    pageNum: currentPage1.value,
    pageSize: pageSize1.value,
  };
  const { code, data } = await baseRoutesApi(paramsObj);
  if (code === 200) {
    tableData1.value = data.list;
    total1.value = data.total;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const handleReset1 = () => {
  queryForm1.value.name = "";
  queryForm1.value.code = "";
  pageSize1.value = 10;
  currentPage1.value = 1;
  getBaseRoutes();
};

// 处理每页条数改变
const handleSizeChange1 = (val) => {
  pageSize1.value = val;
  currentPage1.value = 1;
  getBaseRoutes();
};

// 处理当前页改变
const handleCurrentChange1 = (val) => {
  currentPage1.value = val;
  getBaseRoutes();
};

const handleReset2 = () => {
  queryForm2.value.name = "";
  queryForm2.value.code = "";
  pageSize2.value = 10;
  currentPage2.value = 1;
  getDetailRoutes();
};

// 处理每页条数改变
const handleSizeChange2 = (val) => {
  pageSize2.value = val;
  currentPage2.value = 1;
  getDetailRoutes();
};

// 处理当前页改变
const handleCurrentChange2 = (val) => {
  currentPage2.value = val;
  getDetailRoutes();
};

onMounted(() => {
  getBaseRoutes();
});

const handleFileBaseSelect = () => {
  fileBaseInput.value.click();
};

const handleFileBaseChange = async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const formData = new FormData();
  formData.append("file", file);

  try {
    const { code } = await baseRoutesImportApi(formData);
    if (code === 200) {
      ElMessage.success("导入成功");
      getBaseRoutes();
    }
    // else {
    //   ElMessage.warning(msg || "导入失败");
    // }
  } catch (error) {
    // ElMessage.error("导入请求失败，请重试");
    console.error("导入错误:", error);
  }

  e.target.value = "";
};

const handleFileDetailSelect = () => {
  fileDetailInput.value.click();
};

const handleFileDetailChange = async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const formData = new FormData();
  formData.append("file", file);

  try {
    const { code } = await detailRoutesImportApi(formData);
    if (code === 200) {
      // ElMessage.success("导入成功");
      getDetailRoutes();
    }
    // else {
    //   ElMessage.warning(msg || "导入失败");
    // }
  } catch (error) {
    // ElMessage.error("导入请求失败，请重试");
    console.error("导入错误:", error);
  }

  e.target.value = "";
};
</script>

<style scoped lang="scss">
.query-container {
  position: relative;
  text-align: left;
  font-size: 14px;
  color: #222;
  .tabsBox {
    padding-left: 10px;
    height: 48px;
    overflow: hidden;
    .tabIndex {
      cursor: pointer;
      margin-right: 60px;
      line-height: 36px;
      float: left;
      text-align: center;
      padding: 4px;
      font-size: 16px;
      font-weight: 400;
      height: 36px;
      border-bottom: 4px solid #f4f6f9;
    }
    .tabCur {
      color: #006afd;
      font-weight: 700;
      border-bottom: 4px solid #006afd;
    }
  }
  .shawBox {
    min-height: calc(100vh - 190px);
    overflow: hidden;
    fill: #fff;
    border-radius: 12px;
    background-color: #fff;
    filter: drop-shadow(0 0 15px rgba(14, 41, 73, 0.1));
    padding: 15px;
    box-sizing: border-box;
  }
}
:deep(.el-form-item__content) {
  width: 150px;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 22px;
  margin-bottom: 15px;
}
:deep(.el-form-item__label) {
  color: #222;
}
.query-form {
  position: relative;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #286bf4;
  cursor: default;
  font-weight: bold;
}

/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: #f6f9ff;
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: #f6f9ff;
  color: #222;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: #f9fbfd !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #222;
}
:deep(.el-table .cell) {
  text-align: left;
}
/* 更新部分 */
::v-deep .custom-table .el-table__body td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
  width: 100% !important; /* 继承列的固定宽度 */
}
::v-deep .custom-table .el-table__body .cell {
  width: 100% !important;
  overflow: hidden !important;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
::v-deep .shawBox {
  /* 输入框字体 */
  .el-input__inner {
    font-size: 12px !important;
  }
  /* 下拉选择器 选中项字体 */
  .el-select__selected-item {
    font-size: 12px !important;
  }
  /* 下拉选择器 占位符字体 */
  .el-select__placeholder {
    font-size: 12px !important;
  }
  /* 下拉选择器 下拉选项字体 */
  .el-select-dropdown__item {
    font-size: 12px !important;
  }
  /* 日期选择器 关联输入框字体 */
  .el-date-editor .el-input__inner {
    font-size: 12px !important;
  }
}
</style>
